<template>
  <el-card class="box">
    <img class="avatar" :src="avatar ? avatar : `/public/logo.png`" alt="暂无图片" />
    <div>
      <h3 class="title">{{ getTime() + "好" }} admin{{ username }}</h3>
      <p class="subTitle">甄选运营平台</p>
    </div>
  </el-card>
  <div class="icon">
    <SvgIcon iconName="phone" width="400px" height="400px"></SvgIcon>
  </div>
</template>

<script setup lang="ts">
// 引入用户仓库，获取用户的头像、昵称
import { useUserStore } from "@/store/modules/user";
import { storeToRefs } from "pinia";
import { getTime } from "@/utils/time";
// 用户仓库对象
const userStore = useUserStore();
// 解构出昵称和头像
const { avatar, username } = storeToRefs(userStore);
</script>

<style scoped lang="scss">
.box {
  :deep(.el-card__body) {
    display: flex;
    .avatar {
      width: 120px;
      height: 120px;
      border-radius: 50%;
      margin-right: 20px;
    }
    .title {
      font-size: 30px;
      font-weight: 900;
      margin-bottom: 30px;
    }
    .subTitle {
      font-style: italic;
      color: gray;
      opacity: 0.6;
    }
  }
}
.icon {
  display: flex;
  justify-content: center;
}
</style>
